<template>
  <div class="district-list">
    <div class="head-list">
      <div class="head-item" v-for="(item, index) in headerList" :key="index" :style="{ width: item.width }">{{item.label}}</div>
    </div>
    <div class="content-list" :style="{ height: contentListHeight + 'px' }">
      <div class="content-tr" v-for="(district, index) in dataList" :key="index">
        <div class="content-td" v-for="(item, order) in district" :key="order" :style="{ width: headerList[order].width }">
          <div v-if="order === 0">
            <div v-if="index === 0" class="order-icon">
              <img src="../../../../assets/images/first.png" alt="排名" />
            </div>
            <div v-else-if="index === 1" class="order-icon">
              <img src="../../../../assets/images/second.png" alt="排名" />
            </div>
            <div v-else-if="index === 2" class="order-icon">
              <img src="../../../../assets/images/third.png" alt="排名" />
            </div>
            <div v-else>{{item}}</div>
          </div>
          <div v-else-if="order === 3">
            <div v-if="index === 0" style="color: #FF2A00;">{{item}}</div>
            <div v-else-if="index === 1" style="color: #FFCC00;">{{item}}</div>
            <div v-else-if="index === 2" style="color: #F56429;">{{item}}</div>
            <div v-else>{{item}}</div>
          </div>
          <div v-else>{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'district-list'
})
export default class DistrictList extends Vue {
  private headerList: Array<any> = [
    { label: '排名', width: '60%' },
    { label: '区名称', width: '120%' },
    { label: '勤务力量', width: '110%' },
    { label: '保安力量', width: '110%' }
  ]

  private contentListHeight = 38 * 3 + 4 * 2

  private dataList: Array<any[]> = [
    [1, '马山县', 11092, 98976],
    [2, '上林县', 11092, 98976],
    [3, '宾阳县', 11092, 98976],
    [4, '衡州市', 11092, 98976],
    [5, '武鸣区', 11092, 98976],
    [6, '兴宁区', 11092, 98976],
    [7, '青秀区', 11092, 98976],
    [8, '隆安县', 11092, 98976],
    [9, '西乡塘区', 11092, 98976],
    [10, '邕宁区', 11092, 98976],
    [11, '江南区', 11092, 98976],
    [12, '良庆区', 11092, 98976]
  ]
}
</script>

<style lang="scss" scoped>
.district-list {
  width: 300px;
  position: absolute;
  top: 40px;
  left: 18px;
  .head-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    .head-item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: 'PingFang Regular';
      font-weight: bold;
      color: rgba(255, 255, 255, 0.51);
    }
  }
  .content-list {
    width: 100%;
    transition: height 0.4s linear;
    overflow: hidden;
    .content-tr {
      width: 100%;
      height: 38px;
      background: url('../../../../assets/images/district-item-bg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .content-td {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-family: 'PingFang Regular';
        font-weight: 400;
        color: #fff;
        .order-icon {
          width: 42px;
          height: 38px;
        }
      }
      & + .content-tr {
        margin-top: 4px;
      }
    }
  }
}
</style>
